<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>原子习惯 - 社区</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css">
  <link rel="stylesheet" href="css/styles.css">
</head>
<body>
  <div class="container">
    <div class="status-bar">
      <div class="time">9:41</div>
      <div class="icons">
        <i class="fas fa-signal"></i>
        <i class="fas fa-wifi"></i>
        <i class="fas fa-battery-full"></i>
      </div>
    </div>
    
    <div class="nav-bar">
      <div class="title">社区</div>
      <div class="action">
        <i class="fas fa-plus"></i>
      </div>
    </div>
    
    <div class="screen-container">
      <!-- Search Bar -->
      <div class="search-bar">
        <i class="fas fa-search"></i>
        <input type="text" placeholder="搜索习惯、话题或用户...">
      </div>
      
      <!-- Navigation Tabs -->
      <div class="community-tabs">
        <div class="community-tab active">关注</div>
        <div class="community-tab">发现</div>
        <div class="community-tab">附近</div>
        <div class="community-tab">话题</div>
      </div>
      
      <!-- User Posts -->
      <div class="post-container">
        <!-- Post 1 -->
        <div class="post">
          <div class="post-header">
            <div class="post-user">
              <div class="avatar">
                <img src="https://randomuser.me/api/portraits/women/65.jpg" alt="User Avatar">
              </div>
              <div class="user-info">
                <div class="username">李小明</div>
                <div class="post-time">2小时前</div>
              </div>
            </div>
            <div class="post-menu">
              <i class="fas fa-ellipsis-h"></i>
            </div>
          </div>
          
          <div class="post-content">
            <div class="post-text">
              <p>坚持晨间冥想第30天！感觉自己的专注力有了很大提升，工作效率也比以前高了。</p>
              <p>特别感谢@张教练 的指导，正念冥想真的改变了我的生活 ✨</p>
            </div>
            
            <div class="habit-badge">
              <i class="fas fa-spa"></i>
              <span>晨间冥想 · 连续30天</span>
            </div>
            
            <div class="post-image">
              <img src="https://images.unsplash.com/photo-1545389336-cf090694435e?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=400&q=80" alt="Meditation">
            </div>
          </div>
          
          <div class="post-actions">
            <div class="post-action">
              <i class="far fa-heart"></i>
              <span>142</span>
            </div>
            <div class="post-action">
              <i class="far fa-comment"></i>
              <span>38</span>
            </div>
            <div class="post-action">
              <i class="far fa-share-square"></i>
              <span>12</span>
            </div>
          </div>
          
          <div class="post-comments">
            <div class="comment">
              <div class="comment-avatar">
                <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar">
              </div>
              <div class="comment-content">
                <div class="comment-user">张教练</div>
                <div class="comment-text">继续加油！30天是个很好的里程碑，但习惯的真正力量在于坚持。</div>
                <div class="comment-actions">
                  <span class="comment-time">1小时前</span>
                  <span class="comment-like">
                    <i class="far fa-heart"></i> 24
                  </span>
                  <span class="comment-reply">回复</span>
                </div>
              </div>
            </div>
            
            <div class="view-more-comments">
              查看全部38条评论
            </div>
          </div>
        </div>
        
        <!-- Post 2 -->
        <div class="post">
          <div class="post-header">
            <div class="post-user">
              <div class="avatar">
                <img src="https://randomuser.me/api/portraits/men/54.jpg" alt="User Avatar">
              </div>
              <div class="user-info">
                <div class="username">王大卫</div>
                <div class="post-time">昨天</div>
              </div>
            </div>
            <div class="post-menu">
              <i class="fas fa-ellipsis-h"></i>
            </div>
          </div>
          
          <div class="post-content">
            <div class="post-text">
              <p>分享一个坚持运动的小技巧：把运动装备放在显眼的位置，减少开始的阻力。</p>
              <p>这是《原子习惯》中提到的"让它显而易见"原则，非常有效！</p>
            </div>
            
            <div class="habit-badge">
              <i class="fas fa-running"></i>
              <span>每日运动 · 连续64天</span>
            </div>
          </div>
          
          <div class="post-actions">
            <div class="post-action">
              <i class="fas fa-heart text-danger"></i>
              <span>256</span>
            </div>
            <div class="post-action">
              <i class="far fa-comment"></i>
              <span>42</span>
            </div>
            <div class="post-action">
              <i class="far fa-share-square"></i>
              <span>56</span>
            </div>
          </div>
          
          <div class="post-comments">
            <div class="view-more-comments">
              查看全部42条评论
            </div>
          </div>
        </div>
        
        <!-- Challenge -->
        <div class="challenge-card">
          <div class="challenge-banner">
            <span>30天挑战</span>
          </div>
          <div class="challenge-content">
            <h3>早起者联盟</h3>
            <p>30天坚持6:00前起床，培养高效的晨间习惯</p>
            <div class="challenge-stats">
              <div class="challenge-stat">
                <span class="stat-value">1,245</span>
                <span class="stat-label">参与者</span>
              </div>
              <div class="challenge-stat">
                <span class="stat-value">8</span>
                <span class="stat-label">剩余天数</span>
              </div>
            </div>
            <button class="btn btn-primary btn-block">加入挑战</button>
          </div>
        </div>
        
        <!-- Post 3 -->
        <div class="post">
          <div class="post-header">
            <div class="post-user">
              <div class="avatar">
                <img src="https://randomuser.me/api/portraits/women/33.jpg" alt="User Avatar">
              </div>
              <div class="user-info">
                <div class="username">陈静</div>
                <div class="post-time">3天前</div>
              </div>
            </div>
            <div class="post-menu">
              <i class="fas fa-ellipsis-h"></i>
            </div>
          </div>
          
          <div class="post-content">
            <div class="post-text">
              <p>分享我的读书笔记系统！使用《原子习惯》中的方法，我每天坚持阅读+记录30分钟，已经持续了3个月。</p>
            </div>
            
            <div class="habit-badge">
              <i class="fas fa-book"></i>
              <span>每日阅读 · 连续92天</span>
            </div>
            
            <div class="post-images">
              <img src="https://images.unsplash.com/photo-1506784365847-bbad939e9335?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=400&q=80" alt="Reading Notes">
              <img src="https://images.unsplash.com/photo-1544716278-ca5e3f4abd8c?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=400&q=80" alt="Reading Notes">
            </div>
          </div>
          
          <div class="post-actions">
            <div class="post-action">
              <i class="fas fa-heart text-danger"></i>
              <span>312</span>
            </div>
            <div class="post-action">
              <i class="far fa-comment"></i>
              <span>76</span>
            </div>
            <div class="post-action">
              <i class="far fa-share-square"></i>
              <span>48</span>
            </div>
          </div>
          
          <div class="post-comments">
            <div class="view-more-comments">
              查看全部76条评论
            </div>
          </div>
        </div>
      </div>
    </div>
    
    <!-- Tab Bar -->
    <div class="tab-bar">
      <div class="tab-item" data-nav="dashboard.html">
        <i class="fas fa-home"></i>
        <span>首页</span>
      </div>
      <div class="tab-item" data-nav="templates.html">
        <i class="fas fa-list-ul"></i>
        <span>模板</span>
      </div>
      <div class="tab-item" data-nav="analytics.html">
        <i class="fas fa-chart-pie"></i>
        <span>统计</span>
      </div>
      <div class="tab-item active">
        <i class="fas fa-users"></i>
        <span>社区</span>
      </div>
      <div class="tab-item" data-nav="profile.html">
        <i class="fas fa-user"></i>
        <span>我的</span>
      </div>
    </div>
  </div>

  <style>
    /* Community specific styles */
    .search-bar {
      display: flex;
      align-items: center;
      background-color: var(--background-color);
      border-radius: 10px;
      padding: 10px 15px;
      margin-bottom: 15px;
    }
    
    .search-bar input {
      border: none;
      background: none;
      flex: 1;
      margin-left: 10px;
      font-family: var(--ios-font);
      font-size: 16px;
      outline: none;
    }
    
    .community-tabs {
      display: flex;
      margin-bottom: 15px;
      background-color: var(--card-color);
      border-radius: 10px;
      overflow: hidden;
    }
    
    .community-tab {
      flex: 1;
      text-align: center;
      padding: 12px 5px;
      font-size: 14px;
      cursor: pointer;
    }
    
    .community-tab.active {
      color: var(--primary-color);
      border-bottom: 2px solid var(--primary-color);
    }
    
    .post-container {
      display: flex;
      flex-direction: column;
      gap: 15px;
    }
    
    .post {
      background-color: var(--card-color);
      border-radius: 10px;
      overflow: hidden;
    }
    
    .post-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 15px;
    }
    
    .post-user {
      display: flex;
      align-items: center;
    }
    
    .avatar {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      overflow: hidden;
      margin-right: 10px;
    }
    
    .avatar img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
    
    .username {
      font-weight: 500;
    }
    
    .post-time {
      font-size: 12px;
      color: var(--text-secondary);
    }
    
    .post-content {
      padding: 0 15px;
    }
    
    .post-text {
      margin-bottom: 10px;
    }
    
    .post-text p {
      margin: 5px 0;
    }
    
    .habit-badge {
      display: inline-flex;
      align-items: center;
      background-color: var(--background-color);
      padding: 5px 10px;
      border-radius: 15px;
      font-size: 12px;
      margin-bottom: 10px;
    }
    
    .habit-badge i {
      margin-right: 5px;
      color: var(--primary-color);
    }
    
    .post-image {
      width: 100%;
      border-radius: 10px;
      overflow: hidden;
      margin-bottom: 15px;
    }
    
    .post-image img {
      width: 100%;
      height: auto;
    }
    
    .post-images {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 5px;
      border-radius: 10px;
      overflow: hidden;
      margin-bottom: 15px;
    }
    
    .post-images img {
      width: 100%;
      height: 150px;
      object-fit: cover;
    }
    
    .post-actions {
      display: flex;
      padding: 10px 15px;
      border-top: 1px solid var(--border-color);
      border-bottom: 1px solid var(--border-color);
    }
    
    .post-action {
      display: flex;
      align-items: center;
      margin-right: 20px;
      color: var(--text-secondary);
    }
    
    .post-action i {
      margin-right: 5px;
      font-size: 18px;
    }
    
    .post-comments {
      padding: 15px;
    }
    
    .comment {
      display: flex;
      margin-bottom: 10px;
    }
    
    .comment-avatar {
      width: 30px;
      height: 30px;
      border-radius: 50%;
      overflow: hidden;
      margin-right: 10px;
    }
    
    .comment-avatar img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
    
    .comment-content {
      flex: 1;
    }
    
    .comment-user {
      font-weight: 500;
      margin-bottom: 2px;
    }
    
    .comment-text {
      font-size: 14px;
      margin-bottom: 5px;
    }
    
    .comment-actions {
      display: flex;
      align-items: center;
      font-size: 12px;
      color: var(--text-secondary);
    }
    
    .comment-time,
    .comment-like,
    .comment-reply {
      margin-right: 15px;
    }
    
    .view-more-comments {
      color: var(--text-secondary);
      font-size: 14px;
      padding: 5px 0;
      cursor: pointer;
    }
    
    .challenge-card {
      background-color: var(--card-color);
      border-radius: 10px;
      overflow: hidden;
      position: relative;
    }
    
    .challenge-banner {
      background-color: var(--primary-color);
      color: white;
      padding: 5px 15px;
      font-size: 14px;
      font-weight: 600;
    }
    
    .challenge-content {
      padding: 15px;
    }
    
    .challenge-content h3 {
      margin-top: 0;
      margin-bottom: 5px;
    }
    
    .challenge-content p {
      color: var(--text-secondary);
      margin-bottom: 15px;
    }
    
    .challenge-stats {
      display: flex;
      margin-bottom: 15px;
    }
    
    .challenge-stat {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
    }
    
    .stat-value {
      font-size: 18px;
      font-weight: 600;
      color: var(--primary-color);
    }
    
    .stat-label {
      font-size: 12px;
      color: var(--text-secondary);
    }
  </style>
  
  <script src="js/app.js"></script>
</body>
</html>
